import React, { Component } from "react";
import { Upload, Button, Icon, message } from "antd";
import { inject, observer } from "mobx-react";
import UploadFile from "../components/common/UploadFile";
import { COMPAREFACE } from "../service/api/FaceRecognitionApi";
import { HUMANBODY, HUMANFACE } from "../service/api/FaceRecognitionApi";
import { Link } from "react-router-dom";
import { withRouter } from "react-router";
import $ from 'jquery'

const introduces = [
    {
        icon:
            "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/1.png",
        title: "监测迅速",
        // desc: "基于优化过的深度学习网络进行快速人脸检测，实现全帧扫描。"
        desc: "基于优化过的深度学习网络进行快速人脸检测，实现多路实时检测。"
    },
    {
        icon:
            "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/2.png",
        title: "微服务化发布",
        desc:
            "可实现多种形态的微服务发布，支持基于Kubernetes部署，提供用户灵活的部署选择。"
    },
    {
        icon:
            "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/3.png",
        title: "配置灵活",
        desc:
            "支持用户调节多种推理参数，根据具体业务场景实现人脸推断的准确性和效率的平衡。"
    },
    {
        icon:
            "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/smallIcons/face/rectangle.png",
        title: "硬件适应性强",
        desc: "基于多种硬件环境的优化，可适配基于GPU或CPU的硬件和多种软件基础平台。"
    }
];

@inject("FaceRecognitionStore")
@observer
@withRouter
export default class componentName extends Component {
    constructor(props) {
        super(props);
    }
    swiperRef = null;
    goNext = () => {
        //use `this.swiperRef.swiper` to get the instance of Swiper
        // this.swiperRef.swiper.slideNext();
    };
    state = {
        left: undefined,
        leftImg: undefined,
        right: undefined,
        rightImg: undefined,
        contrastResult: undefined,
        leftIsPeople: true, //左边是否有人
        rightIsPeople: true, //右边是否有人
        leftSquare: true, //左边框
        rightSquare: true,
        leftTooMuchPeople: false, //左边图片内容超过一个人
        rightTooMuchPeople: false, //右边图片内容超过一个人
        whoIsFirst: undefined, //先上传左边还是右边
        divWidth: undefined, //div宽度
        scalingRatio: undefined, //缩放比例
        divWidth: undefined,
        divHeight: undefined,
        uploadWidth: undefined, //上传的图片调整后宽度（不是原本宽度）
        leftPosition: undefined, //左边上传图片人脸在数组中的位置
        rightPosition: undefined, //右边上传图片人脸在数组中的位置
        rightFileTooBig: undefined, //右边上传文件太大
        leftFileTooBig: undefined, //左边上传文件太大,
        leftFileFormatFalse: false, //左边上传文件格式不正确
        rightFileFormatFalse: false, //右边上传文件格式不正确
        leftUploading: false, //左边正在上传文件
        eightUploading: false, //右边正在上传文件
        leftFileVisible: "hidden", //左边的图片现在应该显示么
        rightFileVisible: "hidden" //右边的图片现在应该显示么
    };
    Framed = (
        id,
        data,
        lineWidthA,
        strokeStyle,
        lineWidthB,
        lineWidthC,
        widthBigger
    ) => {
        // this.calculateRatio()//先计算比率
        //导出画框函数
        try {
            var c = document.getElementById(id);
            var ctx = c.getContext("2d");
            data.map((item, key) => {
                var scalingRatio = this.state.scalingRatio;
                if (widthBigger) {
                    //更宽
                    item.l = item.l * scalingRatio;
                    item.t = item.t * scalingRatio + (320 - this.state.divHeight) / 2;
                } else {
                    //更高
                    item.l = item.l * scalingRatio + (340 - this.state.divWidth) / 2;
                    item.t = item.t * scalingRatio;
                }
                item.w = item.w * scalingRatio;
                item.h = item.h * scalingRatio;
                //canvas绘图
                ctx.beginPath();
                ctx.lineWidth = lineWidthA;
                ctx.strokeStyle = strokeStyle;

                ctx.rect(item.l, item.t, item.w, item.h);
                ctx.stroke();
                //   ctx.beginPath();
                //   ctx.lineWidth = lineWidthB;
                //   ctx.moveTo(item.l, item.t + lineWidthB / 2);
                //   ctx.lineTo(item.l + item.w / 4, item.t + lineWidthB / 2);

                //   ctx.moveTo(item.l + item.w, item.t + lineWidthB / 2);
                //   ctx.lineTo(item.l + item.w - item.w / 4, item.t + lineWidthB / 2);

                //   ctx.moveTo(item.l, item.t + item.h - lineWidthB / 2);
                //   ctx.lineTo(item.l + item.w / 4, item.t + item.h - lineWidthB / 2);

                //   ctx.moveTo(item.l + item.w, item.t + item.h - lineWidthB / 2);
                //   ctx.lineTo(
                //     item.l + item.w - item.w / 4,
                //     item.t + item.h - lineWidthB / 2
                //   );

                //   ctx.moveTo(item.l + lineWidthB / 2, item.t);
                //   ctx.lineTo(item.l + lineWidthB / 2, item.t + item.h / 4);

                //   ctx.moveTo(item.l + lineWidthB / 2, item.t + item.h);
                //   ctx.lineTo(item.l + lineWidthB / 2, item.t + item.h - item.h / 4);

                //   ctx.moveTo(item.l + item.w - lineWidthB / 2, item.t);
                //   ctx.lineTo(item.l + item.w - lineWidthB / 2, item.t + item.h / 4);

                //   ctx.moveTo(item.l + item.w - lineWidthB / 2, item.t + item.h);
                //   ctx.lineTo(
                //     item.l + item.w - lineWidthB / 2,
                //     item.t + item.h - item.h / 4
                //   );

                ctx.stroke();
                //绘制完四边框条条
            });
        } catch (err) {
            console.log(err);
        }
    };
    getDivWidthAndHeightNow = id => {
        var img = document.getElementById(id);
        var result = [];
        result.push(window.getComputedStyle(img).width);
        result.push(window.getComputedStyle(img).height);
        result[0] = result[0].split("px")[0];
        result[1] = result[1].split("px")[0];
        return result;
    };
    getUploadImageWidthAndHeight = url => {
        //这里返回的是一个promise
        var result = [];
        var p = new Promise(function (resolve, reject) {
            var img = new Image();
            img.src = url;
            img.onload = function () {
                result[0] = img.width;
                result[1] = img.height;
                resolve(result);
            };
        });

        return p;
    };
    chooseWidthOrHeight = res => {
        if (res[0] > res[1]) {
            //宽比较大
            return "width";
        } else if ((res[0] = res[1])) {
            //一样宽
            return "same";
        } else {
            //高比较大
            return "height";
        }
    };
    resetLeftStations = () => {
        //每次删除之后重新赋值状态 防止出现由于未渲染好而出现的bug
        this.setState(() => ({
            leftIsPeople: true, //左边是否有人
            leftTooMuchPeople: false
        }));
        if (this.state.whoIsFirst) {
            this.setState(() => ({
                whoIsFirst: "right"
            }));
        }
    };
    resetRightStations = () => {
        //每次删除之后重新赋值状态 防止出现由于未渲染好而出现的bug
        this.setState(() => ({
            rightIsPeople: true, //右边是否有人
            rightTooMuchPeople: false //图片内容超过一个人
        }));
        if (this.state.whoIsFirst) {
            this.setState(() => ({
                whoIsFirst: "left"
            }));
        }
    };
    componentDidMount() {
        window.scrollTo(0, 0);
    }
    beforeUpload = (e, type) => {
        const _that = this;
        this.setState(() => ({
            //点击之前默认清空所有状态
            leftFileFormatFalse: false,
            rightFileFormatFalse: false,
            leftFileTooBig: false,
            rightFileTooBig: false
        }));
        var beforeUploadPromise = new Promise(function (resolve, reject) {
            const file = e;
            var fr = new FileReader();
            fr.onload = () => {
                console.log(fileType);
                const fileType = "image/pngimage/jpgimage/jpeg";
                if (fileType.indexOf(file.type) < 0) {
                    if (type == "left") {
                        _that.setState(() => ({
                            leftFileFormatFalse: true
                        }));
                    }
                    if (type == "right") {
                        _that.setState(() => ({
                            rightFileFormatFalse: true
                        }));
                    }
                    return false;
                } else if (file.size > 1024 * 1024 * 5) {
                    if (type == "left") {
                        _that.setState(() => ({
                            leftFileTooBig: true,
                            leftFileFormatFalse: false
                        }));
                    }
                    if (type == "right") {
                        _that.setState(() => ({
                            rightFileTooBig: true,
                            rightFileFormatFalse: false
                        }));
                    }
                    return false;
                } else {
                    _that.setState(() => ({
                        leftFileTooBig: false,
                        rightFileTooBig: false,
                        rightFileFormatFalse: false
                    }));
                    var dataURL = fr.result; // picture_base64
                    if (type == "left") {
                        _that.setState(() => ({
                            left: file,
                            leftImg: dataURL
                        }));
                        var leftData = _that.checkQuery(_that.state.leftImg, type);
                        //发送请求判断有没有人
                        if (_that.state.right) {
                            //先上传右边再上传左边执行这行代码
                            _that.contrastQuery();
                        }
                    } else {
                        _that.setState(() => ({
                            right: file,
                            rightImg: dataURL
                        }));
                        var rightData = _that.checkQuery(_that.state.rightImg, type);
                        if (_that.state.left) {
                            //先上传左边再上传右边执行这行代码
                            _that.contrastQuery();
                        }
                    }
                    //传递给下一层的对象数组
                    var promiseArr = [];
                    promiseArr[0] = leftData;
                    promiseArr[1] = dataURL;
                    promiseArr[2] = rightData;
                    resolve(promiseArr);
                }
            };
            fr.readAsDataURL(file);
        }).then(function (promiseArr) {
            if (promiseArr[0]) {
                //上传的是左边的图片
                _that
                    .getUploadImageWidthAndHeight(promiseArr[1])
                    .then(function (uploadWidth) {
                        //得到上传图片的宽高
                        _that
                            .getUploadImageWidthAndHeight(promiseArr[1])
                            .then(res => {
                                setDivStyle("the_left_img");
                                function setDivStyle(id) {
                                    if (_that.chooseWidthOrHeight(res) == "width") {
                                        //设置样式
                                        //选择宽还是高作为最大的值
                                        document.getElementById(id).style.width = "100%";
                                        _that.setState(() => ({
                                            leftFileVisible: "visible"
                                        }));
                                    } else if (_that.chooseWidthOrHeight(res) == "same") {
                                        document.getElementById(id).style.height = "100%";
                                        _that.setState(() => ({
                                            leftFileVisible: "visible"
                                        }));
                                    } else {
                                        //高比较大
                                        document.getElementById(id).style.height = "100%";
                                        _that.setState(() => ({
                                            leftFileVisible: "visible"
                                        }));
                                    }
                                }
                                return _that.chooseWidthOrHeight(res);
                            })
                            .then(function (widthBigger) {
                                if (widthBigger == "width") {
                                    widthBigger = true;
                                } else {
                                    widthBigger = false;
                                }
                                _that.setState(
                                    () => ({
                                        scalingRatio:
                                            parseFloat(
                                                _that.getDivWidthAndHeightNow("the_left_img")[0]
                                            ) / parseFloat(uploadWidth),
                                        divWidth: _that.getDivWidthAndHeightNow("the_left_img")[0],
                                        divHeight: _that.getDivWidthAndHeightNow("the_left_img")[1],
                                        uploadWidth: uploadWidth
                                    }),
                                    function () {
                                        promiseArr[0].then(checkQueryResult => {
                                            //开始画图
                                            this.Framed(
                                                "uploadFile_canvas",
                                                checkQueryResult,
                                                "1",
                                                "#00B9EF",
                                                "4",
                                                "2",
                                                widthBigger
                                            );
                                        });
                                    }
                                );
                            });
                    });
            } else if (promiseArr[2]) {
                _that
                    .getUploadImageWidthAndHeight(promiseArr[1])
                    .then(function (uploadWidth) {
                        //得到上传图片的宽高
                        _that
                            .getUploadImageWidthAndHeight(promiseArr[1])
                            .then(res => {
                                setDivStyle("the_left_imgB");
                                function setDivStyle(id) {
                                    if (_that.chooseWidthOrHeight(res) == "width") {
                                        //设置样式
                                        //选择宽还是高作为最大的值

                                        document.getElementById(id).style.width = "100%";
                                        _that.setState(() => ({
                                            rightFileVisible: "visible"
                                        }));
                                    } else if (_that.chooseWidthOrHeight(res) == "same") {
                                        document.getElementById(id).style.height = "100%";
                                        _that.setState(() => ({
                                            rightFileVisible: "visible"
                                        }));
                                    } else {
                                        //高比较大
                                        document.getElementById(id).style.height = "100%";
                                        _that.setState(() => ({
                                            rightFileVisible: "visible"
                                        }));
                                    }
                                }
                                return _that.chooseWidthOrHeight(res);
                            })
                            .then(function (widthBigger) {
                                if (widthBigger == "width") {
                                    widthBigger = true;
                                } else {
                                    widthBigger = false;
                                }
                                _that.setState(
                                    () => ({
                                        scalingRatio:
                                            parseFloat(
                                                _that.getDivWidthAndHeightNow("the_left_imgB")[0]
                                            ) / parseFloat(uploadWidth),
                                        divWidth: _that.getDivWidthAndHeightNow("the_left_imgB")[0],
                                        divHeight: _that.getDivWidthAndHeightNow(
                                            "the_left_imgB"
                                        )[1],
                                        uploadWidth: uploadWidth
                                    }),
                                    function () {
                                        promiseArr[2].then(checkQueryResult => {
                                            //开始画图
                                            this.Framed(
                                                "uploadFile_canvasB",
                                                checkQueryResult,
                                                "1",
                                                "#00B9EF",
                                                "4",
                                                "2",
                                                widthBigger
                                            );
                                        });
                                    }
                                );
                            });
                    });
            }
        });
        return beforeUploadPromise;
    };
    checkQuery = async (imgUrl, type) => {
        if (type === "left") {
            this.setState(() => ({
                leftUploading: true
            }));
            message.info("正在上传左边图片");
        } else {
            this.setState(() => ({
                rightUploading: true
            }));
            message.info("正在上传右边图片");
        }

        var checkQueryResult = [];
        const that = this;
        const formData = new FormData();
        if (imgUrl == this.state.leftImg && imgUrl == this.state.rightImg) {
            if (typeof imgUrl == "string" && imgUrl.length > 200) {
                imgUrl = imgUrl.replace("data:image/png;base64,", "base64://");
                imgUrl = imgUrl.replace("data:image/jpg;base64,", "base64://");
                imgUrl = imgUrl.replace("data:image/jpeg;base64,", "base64://");
            }
            formData.append("src", imgUrl);
            if (that.state.whoIsFirst == "right") {
                //    alert('rightFirsrt');
                await HUMANFACE(formData).then(rs => {
                    //左边判断一下
                    if (rs.code == 200) {
                        if (rs.data.length > 15) {
                            //脸大于15
                            that.setState(() => ({
                                leftTooMuchPeople: true
                            }));
                        }
                        if (rs.data == "") {
                            //上传的图片不是人
                            that.setState(() => ({
                                leftIsPeople: false
                            }));
                            // message.info('请上传一张人的图片');
                        } else {
                            //左边上传的是人
                            //找到人脸最大的位置 position.index 为返回值
                            //Math.max(...array.map(item=>item.w*item.h))//map找到数组中最大值
                            var position = rs.data.reduce(
                                (pre, item, index) => {
                                    const value = item.h * item.w;
                                    return pre.value >= value ? pre : { value, index };
                                },
                                { value: 0, index: null } //初始值
                            );
                            checkQueryResult.push(rs.data[position.index]);
                            //找完人脸
                            that.setState(() => ({
                                leftIsPeople: true,
                                leftPosition: position.index
                            }));
                        }
                    }
                });
            }
            if (that.state.whoIsFirst == "left") {
                //alert('leftFirsrt');
                await HUMANFACE(formData).then(rs => {
                    //右边判断一下
                    if (rs.code == 200) {
                        if (rs.data.length > 15) {
                            that.setState(() => ({
                                rightTooMuchPeople: true
                            }));
                        } else {
                            if (rs.data == "") {
                                //右边上传的图片不是人
                                that.setState(() => ({
                                    rightIsPeople: false
                                }));
                                // message.info('请上传一张人的图片');
                            } else {
                                //右边上传的是人
                                //找到人脸最大的位置 position.index 为返回值
                                //Math.max(...array.map(item=>item.w*item.h))//map找到数组中最大值
                                var position = rs.data.reduce(
                                    (pre, item, index) => {
                                        const value = item.h * item.w;
                                        return pre.value >= value ? pre : { value, index };
                                    },
                                    { value: 0, index: null } //初始值
                                );
                                checkQueryResult.push(rs.data[position.index]);
                                //找完人脸
                                that.setState(() => ({
                                    rightIsPeople: true,
                                    rightPosition: position.index
                                }));
                            }
                        }
                    }
                });
            }
        } else {
            if (imgUrl == that.state.leftImg) {
                //alert('leftUpload');
                that.setState({ whoIsFirst: "left" });
                if (typeof imgUrl == "string" && imgUrl.length > 200) {
                    imgUrl = imgUrl.replace("data:image/png;base64,", "base64://");
                    imgUrl = imgUrl.replace("data:image/jpg;base64,", "base64://");
                    imgUrl = imgUrl.replace("data:image/jpeg;base64,", "base64://");
                }
                formData.append("src", imgUrl);
                await HUMANFACE(formData).then(rs => {
                    if (rs.code == 200) {
                        if (rs.data.length > 15) {
                            //左边人太多
                            that.setState(() => ({
                                leftTooMuchPeople: true,
                                leftFrameData: rs.data
                            }));
                            checkQueryResult = [];
                        } else {
                            if (rs.data == "") {
                                //左边上传的图片不是人
                                that.setState(() => ({
                                    leftIsPeople: false
                                }));
                                checkQueryResult = [];
                            } else {
                                //左边上传的是人
                                //找到人脸最大的位置 position.index 为返回值
                                //Math.max(...array.map(item=>item.w*item.h))//map找到数组中最大值
                                var position = rs.data.reduce(
                                    (pre, item, index) => {
                                        const value = item.h * item.w;
                                        return pre.value >= value ? pre : { value, index };
                                    },
                                    { value: 0, index: null } //初始值
                                );
                                checkQueryResult.push(rs.data[position.index]);
                                //找完人脸
                                that.setState(() => ({
                                    leftIsPeople: true,
                                    leftFrameData: rs.data,
                                    leftFrameData: rs.data,
                                    leftTooMuchPeople: false,
                                    leftPosition: position.index
                                }));
                            }
                        }
                    }
                });
            }
            if (imgUrl == that.state.rightImg) {
                // alert('rightUpload');
                that.setState(() => ({
                    whoIsFirst: "right"
                }));
                if (typeof imgUrl == "string" && imgUrl.length > 200) {
                    imgUrl = imgUrl.replace("data:image/png;base64,", "base64://");
                    imgUrl = imgUrl.replace("data:image/jpg;base64,", "base64://");
                    imgUrl = imgUrl.replace("data:image/jpeg;base64,", "base64://");
                }
                formData.append("src", imgUrl);

                await HUMANFACE(formData).then(rs => {
                    if (rs.code == 200) {
                        if (rs.data.length > 15) {
                            //右边人太多
                            that.setState(() => ({
                                rightTooMuchPeople: true
                            }));
                        } else {
                            if (rs.data == "") {
                                //上传的图片不是人
                                that.setState(() => ({
                                    rightIsPeople: false
                                }));
                                // message.info('请上传一张人的图片');
                            } else {
                                //右边是人
                                //找到人脸最大的位置 position.index 为返回值
                                //Math.max(...array.map(item=>item.w*item.h))//map找到数组中最大值
                                var position = rs.data.reduce(
                                    (pre, item, index) => {
                                        const value = item.h * item.w;
                                        return pre.value >= value ? pre : { value, index };
                                    },
                                    { value: 0, index: null } //初始值
                                );
                                checkQueryResult.push(rs.data[position.index]);
                                //找完人脸
                                that.setState(() => ({
                                    rightIsPeople: true,
                                    rightPosition: position.index
                                }));
                            }
                        }
                    }
                });
            }
        }
        if (type === "left") {
            message.info("左边图片上传成功");
            this.setState(() => ({
                leftUploading: false
            }));
        } else {
            message.info("右边图片上传成功");
            this.setState(() => ({
                rightUploading: false
            }));
        }

        return checkQueryResult;
    };
    contrastQuery = () => {
        const { left, right } = this.state;
        const that = this;
        const formData = new FormData();
        formData.append("src", left);
        formData.append("dst", right);
        COMPAREFACE(formData).then(rs => {
            if (rs.code == 200) {
                try {
                    let rate = "00.00%";
                    that.setState({
                        contrastResult: rate
                    });
                    if (!rs.data[0].result[0]) {
                        //当返回数据不存在result时候，即相似度为0的情况
                    } else {
                        // rate = (rs.data[0].result[0].similar_score * 100).toFixed(2) + "%";//
                        console.log(that.state.leftPosition);
                        console.log(that.state.rightPosition);
                        rate =
                            (
                                rs.data[that.state.leftPosition].result[
                                    that.state.rightPosition
                                ].similar_score * 100
                            ).toFixed(2) + "%"; //取人脸最大的比较
                        that.setState({
                            contrastResult: rate
                        });
                    }
                } catch (e) {
                    console.log(e);
                }
            }
        });
    };
    removeCheckImg = type => {
        if (type == "left") {
            this.setState(() => ({
                left: undefined,
                leftImg: undefined,
                contrastResult: undefined,
                leftFileVisible: false
            }));
        } else {
            this.setState(() => ({
                right: undefined,
                rightImg: undefined,
                contrastResult: undefined,
                rightFileVisible: false
            }));
        }
    };
    render() {
        const { beforeUpload, removeCheckImg } = this;
        const {
            leftImg,
            rightImg,
            contrastResult,
            leftIsPeople,
            rightIsPeople,
            leftSquare,
            rightSquare,
            leftTooMuchPeople,
            rightTooMuchPeople,
            leftFileTooBig,
            rightFileTooBig
        } = this.state;
        return (
            <div className="yl-ai-body-container">
                <div className="yl-ai-body-banner">
                    <div className="yl-ai-banner-opicity" />
                    <div className="yl-ai-banner-txt">
                        <div className="yl-ai-banner-title">人脸识别</div>
                        <div className="yl-ai-banner-desc">
                            {/* 人脸 1:1
              比对，验证两张人脸图片是否为同一人；支持jpg，jpeg，png等多种格式，宽高大于10px小于4000px，保证五官清晰可见。 */}
                            人脸识别通过提取人脸的特征，计算不同人脸的相似度，并给出相似度评分。支持1:1、1:N、M:N的人脸比对。
            </div>
                    </div>
                </div>

                <div className="yl-ai-body-container">
                    <div className="yl-ai-body-container-panel">
                        <div className="yl-ai-body-title">产品亮点</div>
                        <div className="yl-ai-body-max-width">
                            <div className="yl-ai-body-introduces">
                                {introduces.map((item, key) => {
                                    return (
                                        <div className="yl-ai-body-introduce">
                                            <div className="yl-ai-body-introduce-icon">
                                                <img src={item.icon} />
                                            </div>
                                            <div className="yl-ai-body-introduce-text">
                                                <div className="yl-ai-body-introduce-title">
                                                    {item.title}
                                                </div>
                                                <div className="yl-ai-body-introduce-desc">
                                                    {item.desc}
                                                </div>
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </div>

                    <div className="yl-ai-body-container-panel">
                        <div className="yl-ai-body-title have-subtitle">功能演示</div>
                        <div className="yl-ai-body-max-width ">
                            <div className="yl-ai-humanRecognitionTracking-scene">
                                <div className="yl-ai-humanRecognitionTracking-scene-desc">
                                    <div className="yl-ai-humanRecognitionTracking-scene-title" style={{ marginLeft: "-280px", marginTop: "35px" }}>
                                        人脸1:1对比
                  </div>
                                    <div className="yl-ai-humanRecognitionTracking-scene-desc" style={{ width: "1105px", marginLeft: "-250px", marginTop: "-40px" }}>
                                        作为一种静态比对，可检测两张图片中的人脸，判断是否是同一个人。同时返回这两个人脸的矩形框坐标、比对的置信度。例如在高速路、机场安检时，受检人员手持身份证等证件，
    通过检查通道，同时对受检人员的外貌及身份证信息进行识别。
                  </div>

                                    <div className="yl-ai-humanRecognitionTracking-scene-desc" style={{ width: "1000px", height: "200px", position: "absolute" }}>
                                        <div className="yl-ai-humanRecognitionTracking-scene-title" style={{ marginLeft: "-280px", marginTop: "465px" }}>
                                            人脸1:N对比
                  </div>
                                        <div className="yl-ai-humanRecognitionTracking-scene-desc" style={{ width: "1105px", marginLeft: "-250px", marginTop: "-40px" }}>
                                            系统采集了“我”的一张图片之后，从海量的人像数据库中找到与当前使用者人脸数据相符合的图像，并进行匹配，找出来“我是谁”。多用于疑犯追踪、刷脸考勤、小区门禁、会场
                                            签到等场景。
                                            <Link to={'/standard_face_database'} className="to_face_project_a"
                                                id="to_face_project_a" target="_blank" onMouseEnter={() => {
                                                    $("#to_face_project_a").css({
                                                        color: "#1B82D2"
                                                    });
                                                }}
                                                onMouseLeave={() => {
                                                    $("#to_face_project_a").css({
                                                        color: "#30AFD7"
                                                    });
                                                }} >
                                                更多体验
                                                <div className="to_face_project_a_icon"></div>
                                            </Link>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>

                        <div className="yl-ai-body-subtitle" style={{ marginTop: "30px" }}>
                            {/* 图片文件类型支持jpg、jpeg、png，图片大小不超过5M */}
                        </div>
                        <div className="yl-ai-body-max-width">
                            <div className="yl-ai-body-test">
                                {!contrastResult && (
                                    <div className="yl-ai-body-test-title">
                                        <span>VS</span>
                                    </div>
                                )}
                                {contrastResult && (
                                    <div className="yl-ai-body-test-title contrast-result">
                                        <span className="contrast-result-value">
                                            {contrastResult}
                                        </span>
                                        <span className="contrast-result-txt">相似度</span>
                                    </div>
                                )}

                                <div className="yl-ai-body-test-panel first-child ">
                                    <div className="yl-ai-body-test-panel-title">原图</div>
                                    <div
                                        className="yl-ai-body-test-panel-upload"
                                        onClick={this.resetLeftStations}
                                    >
                                        <UploadFile
                                            upload={beforeUpload}
                                            del={removeCheckImg}
                                            leftImg={leftImg}
                                            leftFileVisible={this.state.leftFileVisible}
                                            leftIsPeople={leftIsPeople}
                                            resetLeftStations={this.resetLeftStations}
                                            leftSquare={leftSquare}
                                            leftTooMuchPeople={leftTooMuchPeople}
                                            getDivWidthAndHeight={this.getDivWidthAndHeight}
                                            leftFileTooBig={leftFileTooBig}
                                            leftFileFormatFalse={this.state.leftFileFormatFalse}
                                            uploading={this.state.uploading}
                                            leftFileVisible={this.state.leftFileVisible}
                                            type="left"
                                        />
                                    </div>
                                </div>

                                <div className="yl-ai-body-test-panel">
                                    <div className="yl-ai-body-test-panel-title">对比图</div>
                                    <div
                                        className="yl-ai-body-test-panel-upload"
                                        onClick={this.resetRightStations}
                                    >
                                        <UploadFile
                                            upload={beforeUpload}
                                            del={removeCheckImg}
                                            rightImg={rightImg}
                                            rightIsPeople={rightIsPeople}
                                            resetRightStations={this.resetRightStations}
                                            rightSquare={rightSquare}
                                            rightTooMuchPeople={rightTooMuchPeople}
                                            rightFileTooBig={rightFileTooBig}
                                            rightFileFormatFalse={this.state.rightFileFormatFalse}
                                            rightFileVisible={this.state.rightFileVisible}
                                            type="right"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>





                    <div className="yl-ai-body-container-panel yl-ai-body-app-scene" style={{ marginTop: "200px" }}>
                        <div className="yl-ai-body-title">应用场景</div>
                        <div className="yl-ai-body-max-width ">
                            <div className="yl-ai-humanRecognitionTracking-scene">
                                <div className="yl-ai-humanRecognitionTracking-scene-desc">
                                    <div className="yl-ai-humanRecognitionTracking-scene-title">
                                        人脸识别
                  </div>
                                    <div className="yl-ai-humanRecognitionTracking-scene-desc">
                                        此项技术可以用于考勤打卡、刷脸支付等业务场景。通过将移动设备或其它录入设备采集到的一张或多张人脸与系统中留存的底库进行对比，实现身份核验的功能。
                  </div>
                                </div>
                                <div className="yl-ai-humanRecognitionTracking-scene-img">
                                    <img
                                        className="scene-img"
                                        style={{ width: "auto", left: "158px" }}
                                        src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/applyExample1.png"
                                        title=""
                                        alt=""
                                    />
                                    <div className="base-bg1">
                                        <div></div>
                                    </div>
                                    <div className="base-bg2"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div className="yl-ai-body-container-panel yl-ai-example-panel">
                        <div className="yl-ai-body-title">云粒智慧应用案例</div>
                        <div className="yl-ai-body-max-width">
                            <div className="yl-ai-examples">
                                <div className="yl-ai-example">
                                    <div className="yl-ai-example-title title-h2 ">
                                        云防·智慧园区管理平台
                  </div>

                                    <div className="yl-ai-example-double-desc"></div>
                                    <div className="yl-ai-example-image">
                                        <img
                                            src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/example1.png"
                                            alt=""
                                            title=""
                                        />
                                    </div>
                                    <div className="yl-ai-examples-copyWriting">
                                        云防智慧园区管理平台是云粒自主研发的基于人脸识别、车辆识别等视频识别技术的园区综合管理平台，平台由态势感知、异常预警、高级研判、智能检索、智能终端5部分组成，广泛应用于各类园区的综合管控。
                  </div>
                                </div>
                                <div className="yl-ai-example">
                                    <div className="yl-ai-example-title title-h2 ">
                                        基于机器视觉的工作区管理系统
                  </div>

                                    <div className="yl-ai-example-double-desc"></div>
                                    <div className="yl-ai-example-image">
                                        <img
                                            src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/faceRecogition/example2.png"
                                            alt=""
                                            title=""
                                        />
                                    </div>
                                    <div className="yl-ai-examples-copyWriting">
                                        基于机器视觉的工作区管理系统是云粒自主研发的基于人脸识别、人体识别、ReID、语音识别等技术的工作区人员管理系统，该系统通过少量摄像头即可实现全域人员的实时定位，帮助用户实现在线找人，公司考勤，人员活动规律分析，重点区域人员安全管控，工作区组织优化等功能。
                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div >
        );
    }
}
